<template>
  <div>
    <el-row>
      <el-col :span="6" v-for="(o, index) in value" :key="index" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <el-badge :value="index+1" class="item" type="danger">
            <img src="@/assets/img/blue1.png" class="image">
          </el-badge>
          <div style="padding: 14px;">
            <span>{{ o.isConnect ? o.value : '未選擇' }}</span>
            <div class="bottom clearfix">
              <span :class="[ o.isConnect ? 'green' : 'red' , 'circle']"></span>
              <span :class="[ o.isConnect ? 'connect' : 'disconnect' , 'super']">{{ o.isConnect ? '已連接' : '未連接' }}</span>
              <el-select v-model="o.value" filterable placeholder="請選擇" @change="event => onChange(event, index)">
                <el-option
                  v-for="item in diskList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="selectArr.includes(item.value)">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-button type="warning" size="medium" @click="selectArr=[]" class="reset">重選</el-button>
  </div>
</template>

<script>
export default {
  name: 'netdisk-card',

  model: {
    props: "value",
    event: "update",
  },

  props: {
    value: {
      default() {
        return ''
      },
    },
  },

  data() {
    return {
      diskList: [],
      selectValue: [],
      selectArr: []
    }
  },

  created() {
    this.getData()
  },

  mounted() {
    this.selectValue = this.value
  },

  methods: {
    onChange(e, i) {
      this.selectArr.push(e)
      this.selectArr = [...new Set(this.selectArr)]
      let dishName = this.diskList.find(item => item.value == e).dishName
      this.$set(this.selectValue, i, { 'id': e, 'value': dishName, 'isConnect': true })
      this.$emit('update', this.selectValue)
    },

    getData() {
      this.$store.dispatch('netdisk/fetchListUserDish').then(res => {
        // console.log('获取网络硬盘列表')
        // console.log(res)
        this.diskList = res
        if(this.diskList.length) {
          this.diskList.forEach(item => {
            item.label = item.dishName
            item.value = item.dishId
          })
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/css/them.scss";

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid $borderColor;
  border-radius: 50%;

  &.red {
    background-color: $disconnectColor;
  }

  &.green {
    background-color: $connectColor;
  }
}

.super {
  vertical-align: super;
  font-size: 13px;

  &.connect {
    color: $connectColor;
  }

  &.disconnect {
    color: #999;
  }
}

.el-select {
  margin-top: 10px;
}

.el-card {
  overflow: visible;
}

.reset {
  float: left;
  margin: 0.78125rem;
}
</style>
